<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;
            }

            body {
                background: url("../../html/image/img/register_bg.png") no-repeat center;
            }

            .rg_layout {
                width: 900px;
                height: 500px;
                border: 8px solid #EEEEEE;
                background: white;
                /*让div水平居中*/
                margin: auto;
                margin-top: 15px;

            }

            .rg_left {
                /* border: 1px solid red;*/
                float: left;
                margin: 15px;
            }

            .rg_left p:first-child {
                color: #FFD026;
                font-size: 20px;
            }

            .rg_left p:last-child {
                color: #A6A6A6;
                font-size: 20px;
            }


            .rg_center {
                /*border: 1px solid red;*/
                float: left;
                width: 500px;
                margin-left: 20px;
            }


            .rg_right {
                /* border: 1px solid red;*/
                float: right;
            }

            .rg_right p {
                font-size: 15px;
                margin: 15px;
            }

            .rg_right p a {
                color: pink;

            }

            .td_left {
                text-align: right;
                width: 100px;
                height: 45px;
            }

            .td_right {
                padding-left: 40px;
            }

            #username, #password, #email, #name, #checkcode, #birthday, #tel {
                width: 251px;
                height: 32px;
                border: 1px solid #A6A6A6;
                /*设置边框为圆角*/
                border-radius: 5px;
                padding-left: 10px;
            }

            #checkcode {
                width: 110px;
            }

            #img_check {
                height: 32px;
                /*设置图片成垂直居中*/
                vertical-align: middle;
            }

            #btn_sub {
                width: 110px;
                height: 40px;
                background-color: #FFD026;
                border: 1px solid #FFD026;
                margin-top: 15px;

            }

            .error {
                color: red;
                font-size:10px
            }

        </style>
        <script>
            /*
              1.给表单绑定onsubmit事件.监听器中判断每一个方法校验的结果
                  如果都是true  则监听器方法返回true提交
                  如果有一个false 则监听器方法返回false提示

              2.定义一些方法分别校验各个表单项
              3.给各个表单项绑定onblur事件(离焦校验事件)
              */

            window.onload = function () {
                //1.给表单绑定onsubmit事件
                document.getElementById("form").onsubmit = function () {
                    //调用用户名校验方法
                   // checkUsername();

                    //调用密码校验方法
                    //checkPassword();
                    return checkUsername() && checkPassword();
                }
                document.getElementById("username").onblur = checkUsername;
                document.getElementById("password").onblur = checkPassword;



            }

            //2.定义方法分别校验各个表单项
            //定义校验用户名的方法
            function checkUsername() {
                //1.获取用户名的值
                //2.定义正则表达式
                //3.判断用户名是否符合规范
                //4.提示信息
                var name = document.getElementById("username").value;
                var reg_username = /^\w{6,12}$/;
                var flag = reg_username.test(name);
                var s_username = document.getElementById("s_username");

                if (flag) {
                    //校验通过  提示绿色的对勾
                    s_username.innerHTML = "<img src='对勾.png' width='35' height='25'>";

                } else {
                    //校验失败  提示红色的用户名有误
                    s_username.innerHTML = "用户名格式有误";
                }
                return flag;

            }


            function checkPassword() {
                //1.获取用户名的值
                //2.定义正则表达式
                //3.判断用户名是否符合规范
                //4.提示信息
                var password = document.getElementById("password").value;
                var reg_password = /^\w{6,12}$/;
                var flag = reg_password.test(password);
                var s_password = document.getElementById("s_password")

                if (flag) {
                    //校验通过  提示绿色的对勾
                    s_password.innerHTML = "<img src='对勾.png' width='35' height='25'>";

                } else {
                    //校验失败  提示红色的用户名有误
                    s_password.innerHTML = "密码格式有误";
                }
                return flag;

            }


        </script>

    </head>

    <body>
        <div class="rg_layout">

            <div class="rg_left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>
            </div>

            <div class="rg_center">
                <div class="rg_form">
                    <form action="#" method="get" id="form">
                        <table>
                            <tr>
                                <td class="td_left"><label for="username">用户名</label></td>
                                <td class="td_right">
                                    <input type="text" name="username" placeholder="请输入账号" id="username">
                                    <span id="s_username" class="error"></span>
                                </td>

                            </tr>
                            <tr>
                                <td class="td_left"><label for="password">密码</label></td>
                                <td class="td_right">
                                    <input type="password" name="password" placeholder="请输入密码" id="password">
                                    <span id="s_password" class="error"></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="email">Email</label></td>
                                <td class="td_right"><input type="email" name="email" placeholder="请输入Email" id="email">
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="name">姓名</label></td>
                                <td class="td_right"><input type="text" name="name" placeholder="请输入真实姓名" id="name">
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="tel">手机号</label></td>
                                <td class="td_right"><input type="number" name="tel" placeholder="请输入手机号" id="tel"></td>
                            </tr>
                            <tr>
                                <td class="td_left">性别</td>
                                <td class="td_right"><input type="radio" name="gender" value="male" checked> 男
                                    <input type="radio" name="gender" value="female"> 女
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="birthday">出生日期</label></td>
                                <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="checkcode">验证码</label></td>
                                <td class="td_right"><input type="text" name="checkcode" id="checkcode">
                                    <img id="img_check" src="../../html/image/img/verify_code.jpg">
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center" ><input id="btn_sub" type="submit" value="注册"></td>
                            </tr>
                        </table>
                    </form>

                </div>

            </div>

            <div class="rg_right">
                <p>已有账号? <a href="#">立即登录</a></p>
            </div>

        </div>
    </body>
</html>